<template>
  <div>
    <!-- 
      用于磁性材料数据库的高级查询组件
      该组件使用方式
      在qsall.vue文件里面，ctrl+f搜索高级查询，把两个注释包围起来的代码复制到想用的页面即可
     -->
    <a-tooltip v-if="superQueryFlag" :mouseLeaveDelay="0.2">
      <template slot="title">
        <span>已有快速查询条件生效</span>
        <a-divider type="vertical" />
        <a @click="resetQuery">清空</a>
      </template>
      <el-button icon="el-icon-loading" type="primary" size="mini" @click="showQueryDialog = true">
        快速查询
      </el-button>
    </a-tooltip>
    <el-button
      v-else
      type="primary"
      size="mini"
      @click="
        showQueryDialog = true
        searchNumber = 10
        getMySearchHistory()
      "
      >快速查询</el-button
    >
    <div class="queryCSS">
      <el-dialog title="快速查询" :visible.sync="showQueryDialog" width="40%">
        <el-input v-model="content" placeholder="请输入查询内容"></el-input>
        <div style="margin-top: 30px">
          <div class="history">
            <span>历史搜索：</span>
            <el-popover placement="top" width="160" v-model="visible">
                <p>确认清空历史记录吗</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="clearHistory">确定</el-button>
                </div>
                <!-- <el-button slot="reference">删除</el-button> -->
                <img slot="reference" src="../../../assets/iconfile/clear.png">
              </el-popover>
          </div>
          <span v-for="(item, index) in searchHistoryList" :key="index">
            <el-tag style="margin:8px 8px 0 0;cursor: pointer;" @click="getHistoryToInput(item)">{{ item }}</el-tag>
          </span>
          <el-tag
            :hidden="searchNumber == 20"
            type="info"
            style="margin-top:8px;"
            @click="
              searchNumber = 20
              getMySearchHistory()
            "
            >展开更多...</el-tag
          >
        </div>
        <div style="margin-top: 30px">
          <span>
            <el-button @click="resetQuery">重置</el-button>
          </span>
          <span style="float: right">
            <el-button @click="showQueryDialog = false">取 消</el-button>
            <el-button type="primary" @click="QueryForData">查询</el-button>
          </span>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
  props: {
    importDataType: ''
  },
  data() {
    return {
      superQueryFlag: false,
      showQueryDialog: false,
      content: '',
      searchHistoryList: [],
      searchNumber: 10,
      visible: false,
    }
  },
  mounted() {},
  methods: {
    //高级查询重置
    resetQuery() {
      this.superQueryFlag = false
      this.content = ''
      this.$emit('resetQueryKs')
    },
    //点击查询
    QueryForData() {
      this.superQueryFlag = true
      this.$emit('getFastResult', this.content)
    },
    getMySearchHistory() {
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: `/searchHistory/getMySearchHistory?userId=${JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id}&&materialCategory=${this.importDataType}&&number=${this.searchNumber}`,
        method: 'POST'
      }).then(res => {
        this.searchHistoryList = res.data.result.list
      })
    },
    clearHistory() {
       this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: `/searchHistory/deleteMySearchHistory?userId=${JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id}&&materialCategory=${this.importDataType}`,
        method: 'POST'
      }).then(res => {
        if(res.data.code == 200) {
          this.getMySearchHistory()
          Message({
            message: '历史记录删除成功！',
            type: 'success',
            customClass: "myMessageClass"
          })
        }
        if(res.data.code == 500) {
          Message({
            message: '无历史记录可删除！',
            type: 'warning',
            customClass: "myMessageClass"
          })
        }
        this.visible = false;
      })
    },
    getHistoryToInput(tag) {
      this.content = tag
    }
  }
}
</script>

<style lang="less">
.myMessageClass {
  z-index:3001 !important;
}
.mzindex {
  z-index: 3000 !important;
}
.history {
  display: flex;
  justify-content: space-between;
  align-items: center;
  img {
    width: 18px;
    height: 18px;
  }
}
</style>
